<template>
  <div id="centreRight2">
    <div class="bg-color-black">
<!--      左部分-->
      <div class="centleft">
        <div class="zhanshi">进口展示</div>
        <div class="jin">
          <img :src="jin">
        </div>
      </div>
<!--      右部分-->
      <div class="centright">
        <div class="zhanshi">出口展示</div>
        <div class="chu">
          <img :src="chu">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import centreRight2Chart1 from "@/components/echart/centerRight/centerRight2Chart";

export default {
  data() {
    return {
        jin:"",
      chu:""
    };
  },

  mounted() {},
  created() {
    this.initWebSocket()
  },
  methods: {
    //websocket 长链接   用于生成收款码 实时判断等
    //初始化weosocket
    initWebSocket() {
      if (typeof WebSocket === 'undefined') {  //判断浏览器是否支持
        alert('您的浏览器不支持WebSocket')
        return false
      }
      var userName = this.list    //获取当前登录用户信息
      // const wsuri = 'ws://cloud.lgdz-aiti.cn/prod-api/websocket/' + userName  //线上
      const wsuri = 'ws://192.168.10.175:8088/ws/asset/' + 2  //线下

      this.websock = new WebSocket(wsuri)               //初始化socket方法
      this.websock.onopen = this.websocketonopen     //连接成功的处理
      this.websock.onmessage = this.websocketonmessage //接收数据之后的处理
      this.websock.onerror = this.websocketonerror     //报错的处理
      this.websock.onclose = this.websocketclose       //关闭连接的处理
    },
    //连接成功
    websocketonopen() {
      // console.log('WebSocket本机连接成功')
      // 添加心跳检测，每300秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
      let self = this
      this.timer = setInterval(() => {
        try {
          const jsonHeart = {
            'Status': 'heart',            //向服务端标明 本机心跳
            'user': this.list                    //同时携带登录用户信息
          }
          self.websock.send(JSON.stringify(jsonHeart))  //发送消息
        } catch (err) {
          // console.log('断开了：' + err)
          self.connection()
        }
      }, 300000)  // 定时发送
    },
    //接收后端返回的数据，可以根据需要进行处理 实时监控数量
    websocketonmessage(e) {
      // console.log(e)
      const userName = this.list     //获取当前登录用户信息
      var res =JSON.parse(e.data) //将JSON字符串转换成一个对象
      // var res =e.data //将JSON字符串转换成一个对象

      // console.log("数据二----------------")
      // console.log(res)
      if (res.Device_Location=="进口"){
            this.jin=res.spotPhoto
      }
      if (res.Device_Location=="出口"){
        this.chu=res.spotPhoto
      }
    },
    //连接建立失败重连
    websocketonerror(e) {
      // console.log(`连接失败的信息：`, e)
      this.initWebSocket() // 连接失败后尝试重新连接
    },
    //关闭连接
    websocketclose(e) {
      // console.log('断开连接', e)
    },
  }
};
</script>

<style lang="scss" scoped>
#centreRight2{
  display: flex;
  align-items: center; /*定义body的元素垂直居中*/
  justify-content: center; /*定义body的里的元素水平居中*/
  .centleft{
    width: 300px;
    float: left;
    height: 400px;
    margin-top: 15px;
    text-align: center;
    /*background-color: #1ab394;*/
  }
  .centright{
    width: 300px;
    height: 400px;
    float: right;
    text-align: center;
    margin-top: 15px;
    /*background-color:lightcoral;*/
  }
  .zhanshi{
    font-size: 35px;
    font-weight: 600;
    height: 50px;
    color: #2DD5FC;
    /*background-color: #00afff;*/
  }
  .jin{
    width: 260px;
    height: 300px;
    /*background-color: #8c939d;*/
    margin: 20px auto;
  }
  .jin img{
    width: 260px;
    height: 300px;
  }
  .jin img[src = ""]{
    opacity:0;
  }
  .chu{
    width: 260px;
    height: 300px;
    /*background-color: #8c939d;*/
    margin: 20px auto;
  }
  .chu img[src = ""]{
    opacity:0;
  }
  .chu img{
    width: 260px;
    height: 300px;
  }
}
</style>
